<template>
  <div class="table-box">
    <!-- 表格头部 操作按钮 -->
    <div class="card table-header">
      <el-form
        :inline="true"
        :model="selectData"
        label-width="auto"
        class="demo-form-inline"
        style="text-align: left"
      >
        <el-form-item label="姓名:">
          <el-input
            v-model="selectData.username"
            placeholder="请输入姓名"
            clearable
          />
        </el-form-item>
        <el-form-item label="性别:">
          <el-select
            v-model="selectData.gender"
            placeholder="请选择性别"
            clearable
            @change="select"
          >
            <el-option label="男" value="1" />
            <el-option label="女" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="身份证号:">
          <el-input
            v-model="selectData.idCard"
            placeholder="请输入身份证号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱:">
          <el-input
            v-model="selectData.email"
            placeholder="请输入邮箱"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="地址:">
          <el-input
            v-model="selectData.address"
            placeholder="请输入地址"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="创建时间:">
          <el-date-picker
            v-model="selectData.createTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-button el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form>
    </div>
    <div class="card table-main" :style="{ maxHeight: clientHeight + 'px' }">
      <el-table :data="dataList.conpList" border>
        <el-table-column
          prop="username"
          show-overflow-tooltip="true"
          fixed
          label="姓名"
          width="120"
        />
        <el-table-column label="性别" width="80">
          <template #default="scope">
            <span v-if="scope.row.gender !== 2">男</span>
            <span v-else>女</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          show-overflow-tooltip="true"
          label="地址"
          width="250"
        />
        <el-table-column prop="email" label="邮箱" width="250" />
        <el-table-column prop="idCard" label="用户状态" width="250">
          <template #default="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              active-text="启用"
              inactive-text="禁用"
              @change="changeStatus(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="idCard" label="身份证号" width="250" />
        <el-table-column prop="createTime" label="创建时间" width="250" />
        <el-table-column fixed="right" label="操作" min-width="220">
          <template #default="scope">
            <div class="upload-handle">
              <div class="handle-icon" @click="examine(scope.row)">
                <div>
                  <el-icon><ZoomIn /></el-icon>
                </div>
                <div><span>查看</span></div>
              </div>
              <div class="handle-icon" @click="edit(scope.row)">
                <div>
                  <el-icon><Edit /></el-icon>
                </div>
                <div><span>编辑</span></div>
              </div>
              <div class="handle-icon" @click="deleteImg(scope.row)">
                <div>
                  <el-icon><Delete /></el-icon>
                </div>
                <div><span>删除</span></div>
              </div>
            </div>
          </template>
        </el-table-column>
        <template #empty>
          <div class="table-empty">
            <slot name="empty">
              <div>暂无数据</div>
            </slot>
          </div>
        </template>
      </el-table>
      <el-pagination
        :current-page="selectData.page"
        :page-size="selectData.pageSize"
        background="#f0f2f5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="selectData.total"
        @current-change="currChange"
        @size-change="sizeChange"
      />
    </div>
    <el-dialog v-model="isShow" title="用户信息">
      <template #default>
        <el-form :model="active" :inline="false">
          <el-form-item
            label="姓名:"
            label-width="80px"
            placeholder="请输入姓名"
          >
            <el-input
              v-model="active.username"
              :disabled="disabled"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="性别:" label-width="80px">
            <el-select
              v-model="active.gender"
              :disabled="disabled"
              placeholder="请选择性别"
            >
              <el-option label="男" :value="1" />
              <el-option label="女" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item
            label="邮箱:"
            label-width="80px"
            placeholder="请输入邮箱"
          >
            <el-input
              v-model="active.email"
              :disabled="disabled"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="身份证号:"
            label-width="80px"
            placeholder="请输入身份证号"
          >
            <el-input
              v-model="active.idCard"
              :disabled="disabled"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="地址:"
            label-width="80px"
            placeholder="请输入地址"
          >
            <el-input
              v-model="active.address"
              :disabled="disabled"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            v-if="disabled === true"
            label="创建时间:"
            label-width="80px"
            placeholder="请输入地址"
          >
            <el-input
              v-model="active.createTime"
              :disabled="disabled"
              autocomplete="off"
            />
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isShow = false">取消</el-button>
          <el-button type="primary" @click="upData"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { ref, computed, defineComponent, reactive, toRefs, watch } from "vue";
import { getData } from "@/request/api";
import { IntData, ListInt } from "@/views/table/useTable/list";
import { ElMessageBox, ElMessage, ElTable } from "element-plus";

export default defineComponent({
  setup() {
    const data = reactive(new IntData());
    getData().then((res) => {
      data.list = res.data.list;
      data.selectData.total = res.data.total;
    });
    const onSubmit = () => {
      let arr: ListInt[] = [];
      if (
        data.selectData.username ||
        data.selectData.createTime ||
        data.selectData.idCard ||
        data.selectData.gender ||
        data.selectData.address ||
        data.selectData.email
      ) {
        if (data.selectData.username) {
          arr = data.list.filter((value) => {
            return value.username.indexOf(data.selectData.username) !== -1;
          });
        }
        if (data.selectData.idCard) {
          arr = data.list.filter((value) => {
            return value.idCard.indexOf(data.selectData.idCard) !== -1;
          });
        }
        if (data.selectData.email) {
          arr = data.list.filter((value) => {
            return value.email.indexOf(data.selectData.email) !== -1;
          });
        }
        if (data.selectData.address) {
          arr = data.list.filter((value) => {
            return value.address.indexOf(data.selectData.address) !== -1;
          });
        }
        if (data.selectData.gender) {
          arr = data.list.filter((value) => {
            return value.gender.indexOf(data.selectData.gender) !== -1;
          });
        }
      } else {
        arr = data.list;
      }
      data.selectData.total = arr.length;
      data.list = arr;
    };
    // 监听输入框属性
    watch(
      [
        () => data.selectData.username,
        () => data.selectData.gender,
        () => data.selectData.email,
        () => data.selectData.address,
        () => data.selectData.idCard,
      ],
      () => {
        if (
          data.selectData.username == "" &&
          data.selectData.gender == "" &&
          data.selectData.email == "" &&
          data.selectData.address == "" &&
          data.selectData.idCard == ""
        ) {
          getData().then((res) => {
            data.list = res.data.list;
            data.selectData.total = res.data.total;
          });
        }
      }
    );
    const dataList = reactive({
      conpList: computed(() => {
        return data.list.slice(
          (data.selectData.page - 1) * data.selectData.pageSize,
          data.selectData.page * data.selectData.pageSize
        );
      }),
    });
    const select = (val: string) => {
      data.selectData.gender = val;
    };
    const currChange = (page: number) => {
      data.selectData.page = page;
    };
    const sizeChange = (pageSize: number) => {
      data.selectData.pageSize = pageSize;
    };
    const changeStatus = (row: any) => {
      ElMessageBox.confirm(
        `是否切换【${row.username}】的用户状态?`,
        "温馨提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          draggable: false,
        }
      ).then(() => {
        ElMessage({
          type: "success",
          message: `切换【${row.username}】用户状态成功!`,
        });
      });
    };
    const deleteImg = (row: any) => {
      ElMessageBox.confirm(`是否删除【${row.username}】的用户?`, "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        draggable: false,
      }).then(() => {
        ElMessage({
          type: "success",
          message: `删除【${row.username}】用户成功!`,
        });
      });
    };
    const imgViewVisible = ref(false);
    const examine = (row: any) => {
      data.isShow = true;
      data.active = row;
      data.disabled = true;
    };
    const edit = (row: any) => {
      data.isShow = true;
      data.active = row;
      data.disabled = false;
    };
    const upData = () => {
      data.disabled = false;
      let obj: any = data.list.find((value) => value.id === data.active.id);
      obj.username = data.active.username;
      obj.idCard = data.active.idCard;
      obj.gender = data.active.gender;
      obj.email = data.active.email;
      obj.address = data.active.address;
      data.isShow = false;
    };
    const clientHeight = document.body.clientHeight - 270;
    const tableHeight = document.body.clientHeight - 310;

    return {
      ...toRefs(data),
      currChange,
      sizeChange,
      dataList,
      changeStatus,
      deleteImg,
      onSubmit,
      select,
      examine,
      edit,
      upData,
      clientHeight,
      tableHeight,
    };
  },
});
</script>

<style lang="scss" scoped>
.table-box,
.table-main {
  .table-header {
    box-sizing: border-box;
    // padding: 20px;
    overflow-x: hidden;
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 0 12px #0000000d;
    padding: 18px 18px 0;
    margin-bottom: 10px;
  }
  .card {
    box-sizing: border-box;
    padding: 20px;
    overflow-x: hidden;
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 0 12px #0000000d;
  }
}
.upload-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  .handle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    color: #0da7eb;
    .el-icon {
      padding-top: 7px;
      font-size: 14px;
      line-height: 14px;
      color: #0da7eb;
    }
    span {
      font-size: 14px;
      line-height: 14px;
      color: #0da7eb;
    }
  }
}
</style>
